<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <h-section title="批量创建需求">
                <div>
                    <a-steps :current="current">
                        <a-step :title="item.title" v-for="(item, index) of steps" :key="index" />
                    </a-steps>
                    <flexbox justify="center" align="center" class="step-section" v-if="current === 0">
                        <div style="min-width: 400px">
                            <flexbox justify="space-between" class="margin-b-8">
                                <span>请选择要导入的需求数据类型</span>
                            </flexbox>
                            <a-form layout="vertical" :model="form" v-if="current === 0">
                                <a-form-item>
                                    <a-radio-group v-model:value="form.type" name="radioGroup">
                                        <a-radio :value="1">产品需求</a-radio>
                                    </a-radio-group>
                                </a-form-item>
                            </a-form>
                        </div>
                    </flexbox>
                    <flexbox justify="center" align="center" class="step-section" v-if="current === 1">
                        <div style="min-width: 400px">
                            <flexbox justify="space-between" class="margin-b-8">
                                <span>批量创建产品需求</span>
                                <a class="margin-l-8" @click="downRequireTemplate(form.type)">下载模版</a>
                            </flexbox>
                            <a-form layout="vertical" :rules="rules" ref="ruleFormRef" :model="form">
                                <a-form-item label="所属产品" name="system">
                                    <div>
                                        <HSearchSelectCell type="mySystem" label="system" @success="handleSelectChangeSystem" />
                                    </div>
                                </a-form-item>
                            </a-form>
                        </div>
                    </flexbox>
                    <flexbox justify="center" align="center" class="step-section" v-if="current === 2">
                        <upload-cell
                            ref="uploadCell"
                            :span="24"
                            :uploadConfig="uploadConfig"
                            :multiple="false"
                            :disabled="uploadDisabled"
                            style="width: 100%; margin-top: 0"
                            @success="uploadSuccess"
                        />
                    </flexbox>
                    <flexbox justify="center" align="center" class="step-section" v-if="current === 3">
                        <div style="text-align: center">
                            <a-result status="error" title="数据导入失败" style="padding: 0" v-if="errorMsg">
                                <template #extra>
                                    <p style="font-size: 16px" v-html="errorMsg"></p>
                                </template>
                            </a-result>
                            <a-result status="success" title="数据导入成功" style="padding: 0" v-else />
                        </div>
                    </flexbox>
                    <flexbox justify="center" class="btn-group">
                        <a-button v-if="current > 0" @click="prev">上一步</a-button>
                        <a-button type="primary" @click="next" v-if="current === 0 || current === 1">下一步</a-button>
                        <a-button type="primary" @click="prev" v-if="current === 3">重新上传</a-button>
                        <a-button type="primary" @click="jumpTo" v-if="current === 3 && !errorMsg">查看需求</a-button>
                    </flexbox>
                </div>
            </h-section>
        </div>
    </div>
</template>

<script lang="ts">
import UploadCell from './components/UploadCell.vue';
import { useRouter } from 'vue-router';
import { useDownFile } from '@/hooks/common/useFile';
import { HSearchSelectCell } from '@/components';
import api from '@/api';
import store from '@/store';
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'CreateMultiTaskRequire',
    components: {
        UploadCell,
        HSearchSelectCell
    },
    setup() {
        const { downRequireTemplate } = useDownFile();
        const router = useRouter();
        const ruleFormRef = ref<any>();
        const state = reactive({
            form: {
                empId: '',
                system: null,
                type: 1
            },
            current: 0,
            steps: [
                { title: '选择类型', status: 'wait' },
                { title: '必填信息', status: 'wait' },
                { title: '导入数据', status: 'wait' },
                { title: '导入完成', status: 'wait' }
            ],
            rules: {
                system: [{ required: true, message: '系统不能为空', trigger: blur }]
            },
            errorMsg: ''
        });
        const uploadConfig = computed(() => {
            return {
                request: api.fileModel.batchAddRequire,
                query: {
                    ...state.form
                }
            };
        });
        // 必须填写需求处理人才可以上传
        const uploadDisabled = computed(() => {
            return !state.form.empId;
        });
        // 选择回调
        const handleSelectChange = (target) => {
            state.form.empId = target.empId;
        };
        const handleCancel = () => {
            router.go(-1); // 返回上一个界面
        };
        const next = () => {
            if (state.current === 1) {
                unref(ruleFormRef)
                    .validate()
                    .then(() => {
                        state.current++;
                    });
            } else {
                state.current++;
            }
        };
        const prev = () => {
            state.current--;
        };
        const uploadSuccess = (res) => {
            const { success, errorMsg } = res;
            state.errorMsg = success ? '' : errorMsg;
            state.current++;
        };
        const jumpTo = () => {
            const path = state.form.type === 0 ? '/taskRequire/myRequire' : '/productRequire/myRequire';
            router.push({
                path
            });
        };
        const handleSelectChangeSystem = (val) => {
            state.form.system = val.id.toString();
        };
        const init = () => {
            const { empId } = store.getters.userInfo.employeeDTO;
            state.form = {
                ...state.form,
                empId
            };
        };
        init();
        return {
            ruleFormRef,
            ...toRefs(state),
            uploadConfig,
            uploadDisabled,
            handleSelectChange,
            handleCancel,
            downRequireTemplate,
            prev,
            next,
            uploadSuccess,
            jumpTo,
            handleSelectChangeSystem
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    position: relative;
    margin: 24px;
    .page-cont {
        background: #fff;
        .step-section {
            margin-top: 24px;
            position: relative;
            width: 100%;
            ::v-deep(.ant-result-extra) {
                margin-top: 16px;
            }
            ::v-deep(.ant-result-icon > .anticon) {
                font-size: 50px;
            }
        }
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
</style>
